<template>
  <div class="box">
    <div class="main">
      <div class="left">
        <div class="order">
          工单统计
          <span class="time">{{ startTime }}~{{ endTime }}</span>
          <ul v-if="isshow">
            <li>
              <div class="num">{{ listCount[0].total }}</div>
              <div class="type">工单总结（个）</div>
            </li>
            <li>
              <div class="num">{{ listCount[0].completedTotal }}</div>
              <div class="type">完成工单（个）</div>
            </li>
            <li>
              <div class="num">{{ listCount[0].workerCount }}</div>
              <div class="type">进行工单（个）</div>
            </li>
            <li>
              <div class="num">{{ listCount[0].cancelTotal }}</div>
              <div class="type">取消工单（个）</div>
            </li>
          </ul>
        </div>
        <div class="pay">
          <div class="header">
            <div class="solepay">销售统计</div>
            <div class="time">{{ startTime }}~{{ endTime }}</div>
          </div>
          <div class="content">
            <div class="item">
              <div class="solesum">{{ ordernum }}</div>
              <div class="solename">销售数据（个）</div>
            </div>
            <div class="item">
              <div class="solesum">{{ totleMoney }}</div>
              <div class="solename">销售额（万元）</div>
            </div>
          </div>
        </div>
        <div class="zhexian">
          <div class="solenum">
            <span class="a">销售数据</span>
            <span class="time">
              {{ startTime }}~{{ endTime }}
            </span>
          </div>
          <div class="chart-content">
            <div class="leftechart">
              <echartssolid />
            </div>
            <div class="rightechart">
              <rightechart />
            </div>
          </div>
        </div>
      </div>
      <div class="right" />
    </div>
    <div class="footer">
      <div class="footer-left">
        <pie />
      </div>
      <div class="footer-right">
        <pieright />
      </div>
    </div>
  </div>
</template>
<script>
import { getGongdan } from '@/api/table'
import { salenum } from '@/api/table'
import { soleTotle } from '@/api/table'
import moment from 'moment'
import echartssolid from '@/views/dikede/components/echartssolid.vue'
import rightechart from './components/rightechart.vue'
import pie from '@/views/dikede/components/pie.vue'
import pieright from './components/pieright.vue'
export default {
  name: 'DikeDe',
  components: {
    echartssolid,
    rightechart,
    pie,
    pieright
  },
  data() {
    return {
      isshow: false,
      startTime: '2023-04-01',
      endTime: moment().format('YYYY-MM-DD'),
      start: '2023-04-01 12:00:00',
      end: moment().format('YYYY-MM-DD HH:mm:ss'),
      listCount: [],
      ordernum: '',
      totleMoney: ''
    }
  },

  async created() {
    const res = await getGongdan(this.start, this.end)
    this.listCount = res
    // console.log(this.listCount[0])
    this.isshow = true
    const res2 = await salenum({
      start: this.start,
      end: this.end
    })
    this.ordernum = res2
    const res3 = await soleTotle({
      start: this.start,
      end: this.end
    })
    this.totleMoney = res3
  }
}
</script>
<style lang="scss">
.box {
  // display: flex;
  background-color: #f8fafd;
  .main{
    display: flex;
  .left {
    width: 1200px;
    /* height: 400px; */
    // background-color: pink;
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    .order {
      margin: 20px;
      width: 450px;
      height: 200px;
      border-radius: 20px;
      background-color: #e9f3ff;
      background: #e9f3ff;
      background-image: url(),
        url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, calc(100% - 12px) 100%;
      text-align: left;
      font-size: 18px;
      padding: 20px;

      .time {
        margin-left: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
      }
      ul {
        display: flex;
        justify-items: flex-start;
        padding-top: 20px;
        padding-left: 15px;
      }
      li {
        width: 25%;
        list-style: none;
        .num {
          height: 50px;
          font-size: 36px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 50px;
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          text-align: center;
          margin-left: -30px;
        }
        .type {
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #91a7dc;
          line-height: 17px;
        }
      }
    }
    .pay {
      margin: 20px;
      width: 450px;
      height: 200px;
      border-radius: 20px;
      background: #fbefe8;
      background: #fbefe8
        url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
        calc(100% - 12px) 100%;
      display: flex;
      padding: 20px;
      font-size: 18px;
      text-align: left;
      flex-wrap: wrap;
      .header {
        width: 100%;
        height: 50px;
        display: flex;
        .time {
          margin-left: 10px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999;
          height: 100%;
          width: 200px;
        }
      }
      .content {
        display: flex;
        .item {
          width: 220px;
          text-align: center;
        }
        .solesum {
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
          color: #ff5757;
          height: 50px;
          font-size: 36px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 50px;
        }
        .solename {
          color: #de9690;
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 17px;
        }
      }
      .numsole {
        color: #de9690;
        height: 17px;
        width: 100%;
        margin-top: 3px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        white-space: nowrap;
        line-height: 17px;
      }
    }
    .zhexian {
      width: 950px;
      height: 350px;
      // background-color: greenyellow;
      margin-left: 20px;
      border-radius: 20px;
      padding: 20px;
      background: #fff;
    border-radius: 20px;
.solenum{
width: 100%;
height: 30px;
display: flex;
}
      .chart-content{
        display: flex;
        padding: 0px 30px;
          div{
            width: 50%;
          }
      }
      .a {
        width: 90px;
        height: 50px;
         font-size: 16px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        color: #333;
      }
      .time {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        padding-left: 10px;
        width: 150px;
        height: 50px;
      }
.leftechart{
  margin-right: 20px;
}
    }
  }
  .right {
    width: 400px;
    /* height: 400px; */
    // background-color: skyblue;
    background: #fff;
    border-radius: 20px;
  }
  }

  .footer{
    width: 100%;
    height: 400px;
    display: flex;
    .footer-left{
     padding-left: -120px;
    width: 60%;
    height: 300px;
    background-color: #fff ;
    border-radius: 20px;
    margin-left: 20px;
  }
 .footer-right{
    width: 40%;
    height: 300px;
    background-color: #fff;
    border-radius: 20px;
    margin-left: 20px;
    padding: 100px;
  }
  }

}
</style>
